查看原文
其他

国外新式前端面试,看了一下好像懂,又好像不懂

前端大全 2022-07-13

The following article is from 前端真好玩 Author 你们的恺哥

今天给大家分享一个有趣的前端面试问题。

前段时间笔者看到有个老外在招聘的时候喜欢问一个问题:请解释 Twitter 的前十行源码:

其实这十来行源码如果真的要我来解释作用的话,那真的是要麻了。其中确实有好几个不清楚的的地方,所以笔者去具体查了这些代码的作用,今天分享一下。

<!DOCTYPE html>

这个应该是笔者刚学前端的时候学的知识了,这里就直接引用 MDN 的内容了:

在 HTML 中,文档类型 doctype 的声明是必要的。在所有文档的头部,你都将会看到"" 的身影。这个声明的目的是防止浏览器在渲染文档时,切换到我们称为“怪异模式(兼容模式)”的渲染模式。“" 确保浏览器按照最佳的相关规范进行渲染,而不是使用一个不符合规范的渲染模式。

<html dir="ltr" lang="zh">

首先 html 标签是根元素,所有别的元素都在里面。

标签上有两个属性:

  1. 1. dir:文档的文本方向,默认是 ltr,表示从左到右。对于大部分语言来说都是这个文本方向,但比如阿拉伯文的话就是从右到左了,得使用 rtl

  2. 2. lang:文档的语言,zh 表示中文。

<meta charset="utf-8" />

meta 标签是文档级元数据元素,charset 的作用是指定文档的字符集。

<meta name="viewport" ... />

这行代码应该大部分读者都了解它的意思。作用是告诉浏览器当前页面的窗口大小以及窗口的缩放比例。

  • • width:窗口的宽度,默认是 device-width,表示设备的宽度。

  • • initial-scale:缩放比例,默认是 1,表示不缩放。

  • • maximum-scale:最大缩放比例,默认是 1,表示不缩放。

  • • user-scalable:是否允许用户缩放,默认是 yes,表示允许。代码中的 0 表示禁止用户缩放。

  • • viewport-fit:多用于适配 iPhone 刘海屏。

<meta property="og:site_name" content="Twitter" />

这是 Open Graph(OG)元标签,这个标签作用可能挺多读者不清楚作用。

首先这其实算是一个协议,由 Facebook 搞得,之前我也发过一篇关于OG的详细文章讲解,大家可以看一下:前端必看:连OG都不知道还好意思说自己开发过H5?。另外有兴趣的可以阅读下官方网站[1],里面介绍了不少别的字段。

我们可以通过这个协议将网站内容在传播的时候生成一个预览卡片,帮助别的用户更迅速地获取信息,另外还有 SEO 的帮助。

<meta name="apple-mobile-web-app-title" content="Twitter" />

这行与下一行都是作用在 iOS 上的。我们在 iOS 上能把某个网页添加到主屏幕上。

这行代码的作用是显示在屏幕上的书签标题,下一行代码作用是状态栏颜色。

<meta name="theme-color" content="#ffffff" />

浏览器将根据 content 中的内容设定颜色。

比如说我们设置为蓝色时,此时浏览器的颜色表现如下:

<meta http-equiv="origin-trial" content="..." />

这应该又是一个鲜为人知的功能,主要是帮助开发者使用实验中的功能。

这些实验中的功能都是做好但没开放出来的,如果我们想使用这个功能的话就需要用到这个标签了。

有兴趣的读者可以在这个网站[2]上查看当前可用的实验功能,然后选择自己喜欢的功能并按照提示生成 token,然后再将这个标签填入 HTML 文件中即可启用选中的功能了。

html{-ms-text-size-adjust:1 ...}

这行就是纯 CSS 相关的内容了。

  • • text-size-adjust:根据设备尺寸自动调整文字大小,这是为 1 就是不调整,否则对于小屏幕来说字号可能会变得很少导致可读性降低

  • • tap-highlight-color:点击时的高亮颜色,这个应该挺容易猜出意思了

以上就是对于这十行代码的解析。当然部分内容没有详细着去讲,如果各位读者对于某行代码有想深入了解的,可以自行搜索资料或者大家在评论区交流。

引用链接

[1] 官方网站: https://ogp.me/
[2] 这个网站: https://developer.chrome.com/origintrials/#/trials/active

- EOF -


加主页君微信,不仅前端技能+1

主页君日常还会在个人微信分享前端开发学习资源技术文章精选,不定期分享一些有意思的活动岗位内推以及如何用技术做业余项目

加个微信,打开一扇窗



推荐阅读  点击标题可跳转

1、2022 年的前端行业,咋样啦?

2、我的 JavaScript 比你的 Rust 更快

3、我在荷兰做程序员的体验


觉得本文对你有帮助?请分享给更多人

推荐关注「前端大全」,提升前端技能

点赞和在看就是最大的支持❤️

您可能也对以下帖子感兴趣

文章有问题?点此查看未经处理的缓存